<template>
  <div class="workbench" :class="[isListSider?'partS':'fullS']" @click.stop.prevent="inputClick">
    <div class="workbench_title">
      <div :class="{workbench_title_checked: flag == tabItem}" v-for="(tabItem, index) in tabList" :key="index+'tabList'" @click.stop.prevent="appClickFn(tabItem)">
        <span>{{ tabItem }}</span>
        <i @click.stop.prevent="closeAppFn(index)">
          <img src="static/image/search/tab_close.png" />
        </i>
      </div>
    </div>
    <div class='aside' @click="toggleSilder">
      <img :src="isListSider?`static/image/search/aside_fold.png`:`static/image/search/aside_open.png`">
    </div>
    <search-message :searchQuery='searchQuery' v-show="showMsg" :comprehensive='comprehensive' :setHistoryMsg='setHistoryMsg' :toInfo="toInfo" :playerOptions="playerOptions" @searchMdbTochat='searchMdbTochat'
      @toForwarding="toForwarding" @toDownFile="toDownFile" @toBacklog="toBacklog" :isSearchShow="isSearchShows"></search-message>
    <search-broad :searchQuery='searchQuery' v-show="showBro" :comprehensive='comprehensive' @downloadListAddProcess="downloadListAddProcess" :isSearchShow="isSearchShows"></search-broad>
  </div>
</template>

<script>
import searchBroad from "./search-broad.vue";
import searchMessage from "./search-message.vue"; //组织架构列表组件
export default {
  name: "structureMain",
  props: {
    comprehensive: "",
    groupList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    toInfo: {
      type: Object,
      default: {
        id: "",
        name: "",
        isGroup: false,
      },
    },
    playerOptions: {
      type: Object,
      default: {},
    },
    addUserDisabled: {
      type: Boolean,
    },
    bookList: {
      type: Array,
    },
    setHistoryMsg: {
      type: Function,
    },
    isListSider: {
      type: Boolean,
    },
    isSearchShows: {
      type: Boolean,
    },
  },
  components: {
    searchMessage,
    searchBroad,
  },
  data() {
    return {
      searchQuery: "",
      tabList: [],
      groupListShow: null,
      rightShow: false,
      showMsg: false,
      showBro: false,
      flag: "",
    };
  },
  computed: {
    myInfo() {
      return this.$store.state.myInfo;
    },
    search_list_array: {
      get() {
        return this.$store.state.search_list_array;
      },
      set(val) {
        this.$store.commit("setsearchListArr", val);
      },
    },
  },
  watch: {},
  methods: {
    toBacklog(item) {
      this.$emit("chatFunctionHandle", false);
      this.$emit("addBacklogShow", item);
    },
    toggleSilder() {
      if (this.isListSider) {
        this.$changeTitleColor("", "#f7f7f7");
      } else {
        this.$changeTitleColor("#fff", "#f7f7f7");
      }
      this.$emit("toggleListSider");
    },
    inputClick() {
      this.$emit("inputClick");
    },
    appClickFn(e) {
      this.flag = e;
      if (e == "聊天记录") {
        this.showMsg = true;
        this.showBro = false;
      } else {
        this.showMsg = false;
        this.showBro = true;
      }
    },
    closeAppFn(i) {
      this.tabList.splice(i, 1);
      if (this.tabList.length == 0) {
        this.$emit("showClose");
      } else {
        this.appClickFn(this.tabList[0]);
      }
    },
    addAppFn(e, val) {
      console.log(e, val, 124);
      this.searchQuery = val;
      if (this.tabList.includes(e)) {
        this.appClickFn(e);
      } else {
        this.tabList.push(e);
        this.appClickFn(e);
      }
    },
    searchMdbTochat(e) {
      this.$emit("searchMdbTochat", e);
    },
    toForwarding(e) {
      this.$emit("toForwarding", e);
    },
    toDownFile(e) {
      this.$emit("toDownFile", e);
    },
    downloadListAddProcess(e) {
      this.$emit("downloadListAddProcess", e);
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.fullS {
  width: calc(100% - 56px);
}
.partS {
  width: calc(100% - 313px);
}
.workbench {
  background: #ffffff;
  position: fixed;
  z-index: 2;
  right: 0;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  .aside {
    position: absolute;
    left: 0;
    top: 45%;
    z-index: 3;
  }
  .workbench_title {
    display: flex;
    width: 100%;
    height: 40px;
    padding: 7px 10px 0 10px;
    text-align: left;
    background: #f5f5f5;
    border-bottom: 1px solid #e6e6e6;
    div {
      width: 112px;
      height: 32px;
      line-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      border: 1px solid #e6e6e6;
      color: #333333;
      background: #eeeeee;
      margin-right: 10px;
      padding-left: 12px;
      cursor: pointer;
      span {
        font-size: 14px;
      }
    }
    .workbench_title_checked {
      color: #fa7500;
      background: #fff;
      border-bottom: 1px solid #fff;
      font-weight: bold;
    }
    i {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 12px;
      height: 30px;
      margin-left: 10px;
    }
  }
}
.detailBox {
  z-index: 1;
  .detailWrap {
    position: relative;
  }
  .detailTitle {
    height: 36px;
    line-height: 36px;
    width: 100%;
    border-bottom: 1px solid #fa7500;
    box-sizing: border-box;
    text-align: left;
    font-weight: bold;
    padding-left: 20px;
  }
  .detailMiddle {
    display: flex;
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    justify-content: space-between;
    border-top: 1px solid #e6e6e6;
    img {
      cursor: pointer;
      margin: 0 3px;
    }
    .number {
      cursor: pointer;
      color: #999;
      margin-left: 20px;
      span {
        color: #fa7500;
      }
    }
    .btn_d {
      margin: 0 5px 0 7px;
      display: flex;
      align-items: center;
      span {
        margin-right: 7px;
      }
    }
  }
  .detailItem {
    height: 182px;
    width: 100%;
    overflow-y: scroll;
    padding: 0 20px;
    position: absolute;
    top: 30px;
    background-color: #999;
    .item {
      cursor: pointer;
      width: calc(100% + 7px); //zk标记，抵消滚动条的宽度
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      overflow: hidden;
      img {
        margin: 0 6px;
      }
      .personInfo {
        display: flex;
        align-items: center;
        width: 150px;
      }
      .itemcontent {
        flex: 1;
        text-align: left;
        margin: 0 30px 0 70px;
        max-width: 300px;
        .name {
          font-size: 16px;
          color: #333;
          // font-weight: bold;
          line-height: 20px;
        }
        .value {
          color: #666;
          line-height: 22px;
          font-size: 14px;
          word-break: break-all;
        }
      }
      .time {
        color: #999;
      }
    }
  }
}
</style>